<template>
	<div class="update">
		<el-upload
			ref="upload"
			class="upload-demo"
			drag
			:limit="1"
			:auto-upload="false"
			:on-exceed="handleExceed"
			:file-list="fileList"
			:on-change="handleChange"
		>
			<el-icon class="el-icon--upload"><DocumentAdd /></el-icon>
			<div class="el-upload__text">Drop file here or <em>click to add</em></div>
		</el-upload>
	</div>
</template>

<script setup lang="ts">
import { DocumentAdd } from '@element-plus/icons-vue';
import { genFileId } from 'element-plus';
import { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { ref } from 'vue';
const fileList = ref([]);
const upload = ref<UploadInstance>();
const handleExceed: UploadProps['onExceed'] = (files) => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	file.uid = genFileId();
	upload.value!.handleStart(file);
};
const handleChange: UploadProps['onChange'] = (uploadFile) => {
	let raw_file = uploadFile.raw;
	if (raw_file) {
		const reader = new FileReader();
		reader.readAsDataURL(raw_file);
		reader.onload = (e) => {
			console.log(e.target?.result);
		};
	}
};
</script>

<style scoped lang="less">
.update {
	background-color: rgba(75, 189, 192, 0.4);
	height: 100%;
	width: 100%;
}
</style>
